new Vue({
  el: "#app",
  data(){
    return {
      stompClient: undefined,
      tableData: [],
      from: '',
      input: ''
    }
  },
  methods:{
    submit() {
      if (!this.from) {
        this.setName(this.input);
        this.input = '';
      } else {
        this.send(this.input);
      }
    },
    send() {
      this.stompClient.send('/app/topic/chat', {}, JSON.stringify({
            from: this.from,
            content: this.input,
            date: new Date()
          })
      )
      this.input='';
    },
    setName(name) {
      this.from = name;
    },
  },
  mounted: function() {
    this.$nextTick(function() {
      let socket = new SockJS("/websocket");
      this.stompClient = Stomp.over(socket);
      let _this=this;
      this.stompClient.connect(
        {},
        function(frame) {
          _this.stompClient.subscribe("/topic/chat", function(val) {
            _this.tableData.push(JSON.parse(val.body));
          });
        }
      );
    });
  },
});
